From 45bd9b72b9f8e9592396b4694f22e45e61e0be76 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 25 Sep 2025 13:24:43 +0300
Subject: [PATCH] chore(react/type_widgets): set up code block word wrap

---
 .../src/widgets/type_widgets/text/EditableText.tsx     |  8 +++++---
 .../src/widgets/type_widgets/text/ReadOnlyText.tsx     |  5 +++--
 .../type_widgets_old/abstract_text_type_widget.ts      | 10 ----------
 3 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/text/EditableText.tsx b/apps/client/src/widgets/type_widgets/text/EditableText.tsx
index 6be88b2a2..20a568d44 100644
--- a/apps/client/src/widgets/type_widgets/text/EditableText.tsx
+++ b/apps/client/src/widgets/type_widgets/text/EditableText.tsx
@@ -2,7 +2,7 @@ import { useRef, useState } from "preact/hooks";
 import dialog from "../../../services/dialog";
 import toast from "../../../services/toast";
 import utils, { deferred, isMobile } from "../../../services/utils";
-import { useEditorSpacedUpdate, useKeyboardShortcuts, useNoteLabel, useTriliumEvent, useTriliumOption } from "../../react/hooks";
+import { useEditorSpacedUpdate, useKeyboardShortcuts, useNoteLabel, useTriliumEvent, useTriliumOption, useTriliumOptionBool } from "../../react/hooks";
 import { TypeWidgetProps } from "../type_widget";
 import CKEditorWithWatchdog, { CKEditorApi } from "./CKEditorWithWatchdog";
 import "./EditableText.css";
@@ -23,6 +23,7 @@ export default function EditableText({ note, parentComponent, ntxId, noteContext
     const editorApiRef = useRef<CKEditorApi>(null);
     const [ language ] = useNoteLabel(note, "language");
     const [ textNoteEditorType ] = useTriliumOption("textNoteEditorType");
+    const [ codeBlockWordWrap ] = useTriliumOptionBool("codeBlockWordWrap");
     const isClassicEditor = isMobile() || textNoteEditorType === "ckeditor-classic";
     const initialized = useRef(deferred<void>());
     const spacedUpdate = useEditorSpacedUpdate({
@@ -110,9 +111,10 @@ export default function EditableText({ note, parentComponent, ntxId, noteContext
     });
 
     return (
-        <div ref={containerRef} class="note-detail-editable-text note-detail-printable">
+        <div ref={containerRef} class={`note-detail-editable-text note-detail-printable ${codeBlockWordWrap ? "word-wrap" : ""}`}>
             {note && <CKEditorWithWatchdog
-                className="note-detail-editable-text-editor use-tn-links" tabIndex={300}
+                className="note-detail-editable-text-editor use-tn-links"
+                tabIndex={300}
                 content={content}
                 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 205e25b45..ce90709ba 100644
--- a/apps/client/src/widgets/type_widgets/text/ReadOnlyText.tsx
+++ b/apps/client/src/widgets/type_widgets/text/ReadOnlyText.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useRef } from "preact/hooks";
 import { TypeWidgetProps } from "../type_widget";
 import "./ReadOnlyText.css";
-import { useNoteBlob, useNoteLabel, useTriliumEvent } from "../../react/hooks";
+import { useNoteBlob, useNoteLabel, useTriliumEvent, useTriliumOptionBool } from "../../react/hooks";
 import RawHtml from "../../react/RawHtml";
 
 // we load CKEditor also for read only notes because they contain content styles required for correct rendering of even read only notes
@@ -21,6 +21,7 @@ import appContext from "../../../components/app_context";
 export default function ReadOnlyText({ note, noteContext, ntxId }: TypeWidgetProps) {
     const blob = useNoteBlob(note);
     const contentRef = useRef<HTMLDivElement>(null);
+    const [ codeBlockWordWrap ] = useTriliumOptionBool("codeBlockWordWrap");
     const { isRtl } = useNoteLanguage(note);
 
     // Apply necessary transforms.
@@ -50,7 +51,7 @@ export default function ReadOnlyText({ note, noteContext, ntxId }: TypeWidgetPro
 
     return (
         <div
-            className="note-detail-readonly-text note-detail-printable"
+            className={`note-detail-readonly-text note-detail-printable ${codeBlockWordWrap ? "word-wrap" : ""}`}
             tabindex={100}
             dir={isRtl ? "rtl" : "ltr"}
         >
diff --git a/apps/client/src/widgets/type_widgets_old/abstract_text_type_widget.ts b/apps/client/src/widgets/type_widgets_old/abstract_text_type_widget.ts
index 6208a673b..0bd4cebf3 100644
--- a/apps/client/src/widgets/type_widgets_old/abstract_text_type_widget.ts
+++ b/apps/client/src/widgets/type_widgets_old/abstract_text_type_widget.ts
@@ -10,19 +10,9 @@ import attributes from "../../services/attributes.js";
 export default class AbstractTextTypeWidget extends TypeWidget {
     doRender() {
         super.doRender();
-        this.refreshCodeBlockOptions();
-    }
-
-    refreshCodeBlockOptions() {
-        const wordWrap = options.is("codeBlockWordWrap");
-        this.$widget.toggleClass("word-wrap", wordWrap);
     }
 
     async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (loadResults.isOptionReloaded("codeBlockWordWrap")) {
-            this.refreshCodeBlockOptions();
-        }
-
         if (loadResults.getAttributeRows().find((attr) =>
             attr.type === "label" &&
             attr.name === "language" &&