From b19da8157272df0edd7f9757fe1e9cb627a027bc Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 20 Sep 2025 13:00:15 +0300
Subject: [PATCH] chore(react/type_widget): force line wrapping

---
 apps/client/src/widgets/type_widgets/code/Code.tsx    |  8 +++++---
 .../src/widgets/type_widgets/helpers/SplitEditor.tsx  | 11 +++++++++--
 .../type_widgets_old/abstract_split_type_widget.ts    |  9 ---------
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/code/Code.tsx b/apps/client/src/widgets/type_widgets/code/Code.tsx
index 7516ab400..9a06186a2 100644
--- a/apps/client/src/widgets/type_widgets/code/Code.tsx
+++ b/apps/client/src/widgets/type_widgets/code/Code.tsx
@@ -35,9 +35,10 @@ export function ReadOnlyCode({ note, viewScope, ntxId, parentComponent }: TypeWi
     )
 }
 
-export function EditableCode({ note, ntxId, debounceUpdate, parentComponent }: TypeWidgetProps & {
+export function EditableCode({ note, ntxId, debounceUpdate, parentComponent, ...editorProps }: TypeWidgetProps & {
     // if true, the update will be debounced to prevent excessive updates. Especially useful if the editor is linked to a live preview.
     debounceUpdate?: boolean;
+    lineWrapping?: boolean;
 }) {
     const editorRef = useRef<VanillaCodeMirror>(null);
     const containerRef = useRef<HTMLPreElement>(null);
@@ -76,6 +77,7 @@ export function EditableCode({ note, ntxId, debounceUpdate, parentComponent }: T
                     }
                     spacedUpdate.scheduleUpdate();
                 }}
+                {...editorProps}
             />
 
             <TouchBar>
@@ -87,7 +89,7 @@ export function EditableCode({ note, ntxId, debounceUpdate, parentComponent }: T
     )
 }
 
-export function CodeEditor({ parentComponent, ntxId, containerRef: externalContainerRef, editorRef: externalEditorRef, mime, onInitialized, ...editorProps }: Omit<CodeMirrorProps, "onThemeChange" | "lineWrapping"> & Pick<TypeWidgetProps, "parentComponent" | "ntxId">) {
+export function CodeEditor({ parentComponent, ntxId, containerRef: externalContainerRef, editorRef: externalEditorRef, mime, onInitialized, lineWrapping, ...editorProps }: Omit<CodeMirrorProps, "onThemeChange"> & Pick<TypeWidgetProps, "parentComponent" | "ntxId">) {
     const codeEditorRef = useRef<VanillaCodeMirror>(null);
     const containerRef = useSyncedRef(externalContainerRef);
     const initialized = useRef($.Deferred());
@@ -149,7 +151,7 @@ export function CodeEditor({ parentComponent, ntxId, containerRef: externalConta
         mime={mime}
         editorRef={codeEditorRef}
         containerRef={containerRef}
-        lineWrapping={codeLineWrapEnabled}
+        lineWrapping={lineWrapping ?? codeLineWrapEnabled}
         onInitialized={() => {
             if (externalContainerRef && containerRef.current) {
                 externalContainerRef.current = containerRef.current;
diff --git a/apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx b/apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx
index b3e84298b..8ff29fce2 100644
--- a/apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx
+++ b/apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx
@@ -6,6 +6,7 @@ import { TypeWidgetProps } from "../type_widget";
 import "./SplitEditor.css";
 import Split from "split.js";
 import { DEFAULT_GUTTER_SIZE } from "../../../services/resizer";
+import { CodeEditor, EditableCode } from "../code/Code";
 
 interface SplitEditorProps extends TypeWidgetProps {
     error?: string | null;
@@ -21,14 +22,20 @@ interface SplitEditorProps extends TypeWidgetProps {
  * - Can display errors to the user via {@link setError}.
  * - Horizontal or vertical orientation for the editor/preview split, adjustable via the switch split orientation button floating button.
  */
-export default function SplitEditor({ note, error, splitOptions }: SplitEditorProps) {
+export default function SplitEditor({ note, error, splitOptions, ...editorProps }: SplitEditorProps) {
     const splitEditorOrientation = useSplitOrientation();
     const [ readOnly ] = useNoteLabelBoolean(note, "readOnly");
     const containerRef = useRef<HTMLDivElement>(null);
 
     const editor = (!readOnly &&
         <div className="note-detail-split-editor-col">
-            <div className="note-detail-split-editor">Detail goes here.</div>
+            <div className="note-detail-split-editor">
+                <EditableCode
+                    note={note}
+                    lineWrapping={false}
+                    {...editorProps}
+                />
+            </div>
             {error && <Admonition type="caution" className="note-detail-error-container">
                 {error}
             </Admonition>}
diff --git a/apps/client/src/widgets/type_widgets_old/abstract_split_type_widget.ts b/apps/client/src/widgets/type_widgets_old/abstract_split_type_widget.ts
index e37c42987..d9e94969f 100644
--- a/apps/client/src/widgets/type_widgets_old/abstract_split_type_widget.ts
+++ b/apps/client/src/widgets/type_widgets_old/abstract_split_type_widget.ts
@@ -84,15 +84,6 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
         }
     }
 
-    /**
-     * Called upon when the code editor is being initialized. Can be used to add additional options to the editor.
-     */
-    buildEditorExtraOptions(): Partial<EditorConfig> {
-        return {
-            lineWrapping: false
-        };
-    }
-
     buildPreviewButtons(): OnClickButtonWidget[] {
         return [];
     }