From 615fe1859375455f9d2ab89c1035af2fd050e1d4 Mon Sep 17 00:00:00 2001
From: Herpes3000 <61895715+randemgame@users.noreply.github.com>
Date: Sun, 17 Nov 2024 00:49:01 +0200
Subject: [PATCH] another approach with single line marker sequence

Keeps single-line input behaviour, uses a marker sequence instead of actual newlines, converts markers to spaces for display
---
 .../Scenes/SceneDetails/SceneEditPanel.tsx    | 50 +++++++++++--------
 ui/v2.5/src/components/Scenes/styles.scss     |  8 +--
 2 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx
index 2eab79bafda..c398bd5cd80 100644
--- a/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useMemo } from "react";
+import React, { useEffect, useState, useMemo, useRef } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { Button, Form, Col, Row, ButtonGroup } from "react-bootstrap";
 import Mousetrap from "mousetrap";
@@ -64,6 +64,8 @@ export const SceneEditPanel: React.FC<IProps> = ({
 }) => {
   const intl = useIntl();
   const Toast = useToast();
+  const titleInputRef = useRef<HTMLInputElement>(null);  // Move ref hook to top
+
 
   const [galleries, setGalleries] = useState<Gallery[]>([]);
   const [performers, setPerformers] = useState<Performer[]>([]);
@@ -674,33 +676,37 @@ export const SceneEditPanel: React.FC<IProps> = ({
     return renderInputField("details", "textarea", "details", props);
   }
 
-  const [titleInput, setTitleInput] = useState(scene.title ?? "");
-
-  const handleTitleKeyPress = (
-    event: React.KeyboardEvent<HTMLInputElement>
-  ) => {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      const newTitle = titleInput + "\n";
-      setTitleInput(newTitle);
-      formik.setFieldValue("title", newTitle);
-    }
-  };
-
   function renderTitleField() {
+    const displayValue = formik.values.title.replace(/\n/g, ' ');
+    console.log("Rendering with value:", displayValue);
+    
     return (
       <Form.Control
+        ref={titleInputRef}
         className="text-input"
         type="text"
-        value={titleInput}
-        onChange={(e) => {
-          const newValue = e.target.value;
-          setTitleInput(newValue);
-          formik.setFieldValue("title", newValue);
+        value={displayValue}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          formik.setFieldValue("title", e.target.value);
+        }}
+        onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
+          if (event.key === "Enter") {
+            event.preventDefault();
+            const cursorPosition = event.currentTarget.selectionStart ?? 0;
+            const newTitle = formik.values.title.substring(0, cursorPosition) + 
+                            '\n' + 
+                            formik.values.title.substring(cursorPosition);
+            console.log("New title:", newTitle);
+            formik.setFieldValue("title", newTitle);
+            
+            // Safely restore cursor position
+            setTimeout(() => {
+              if (titleInputRef.current) {
+                titleInputRef.current.setSelectionRange(cursorPosition + 1, cursorPosition + 1);
+              }
+            }, 0);
+          }
         }}
-        onKeyPress={handleTitleKeyPress}
-        style={{ whiteSpace: "pre-wrap" }}
-        isInvalid={!!formik.errors.title}
       />
     );
   }
diff --git a/ui/v2.5/src/components/Scenes/styles.scss b/ui/v2.5/src/components/Scenes/styles.scss
index cd9f6fc793c..866f95e4c83 100644
--- a/ui/v2.5/src/components/Scenes/styles.scss
+++ b/ui/v2.5/src/components/Scenes/styles.scss
@@ -23,10 +23,10 @@
   padding: 0.5rem 1rem 0 1rem;
 }
 
-input[type="text"] {
-  white-space: pre-wrap;
-  height: auto;
-  overflow-y: hidden;
+.text-input {
+  white-space: normal !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
 }
 
 .performer-tag-container,